<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :columns="columns"
      :tableData="tableData"
      @handleTableData="handleTableData"
      :paginationDisplay="true"
    />
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import { userDetail } from '@/api/user'
import dayjs from 'dayjs'
export default {
  name: 'UserPackageDetail',
  components: { TableSearch },
  data() {
    return {
      columns: [
        {
          label: '券码',
          prop: 'integralId',
        },
        {
          label: '购买日期',
          prop: 'bindingTime',
          formatter: (item) => {
            if (!item.bindingTime) return '--'
            return dayjs(item.bindingTime).format('YYYY-MM-DD HH:mm:ss')
          },
        },
        {
          label: '交易号',
          prop: 'orderNum',
        },
        {
          label: '代理商名称',
          prop: 'merchantName',
        },
        {
          label: '套餐电站',
          prop: 'stationName',
        },
        {
          label: '截止日期',
          prop: 'expireTime',
          formatter: (item) => {
            if (!item.expireTime) return '--'
            return dayjs(item.expireTime).format('YYYY-MM-DD HH:mm:ss')
          },
        },
        {
          label: '剩余充电时长(分钟)',
          prop: 'restTime',
        },
      ],
      tableData: {},
      loading: false,
    }
  },
  methods: {
    handleTableData(params) {
      if (!this.$route.params.id) return
      this.loading = true
      userDetail({
        ...params,
        userId: this.$route.params.id,
      })
        .then((res) => {
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
